<template>
  <div style="min-height: 450px">
    <div style="padding: 10px 10px" class="whiteBox">
      <Tab :show-back="true" :tabs="tabColumns" :active-name="activeName" @handleTabClick="handleTabClick" />
    </div>
    <div v-show="activeName === '1'">
      <div class="order-detail">
        <ProductList ref="detailTabList1" :order-id="ruleFrom.id" />
      </div>
    </div>
    <div v-show="activeName === '2'">
      <DeliveryNote ref="detailTabList2" :order-id="ruleFrom.id" />
    </div>
    <div v-show="activeName === '3'">
      <CommonFile ref="detailTabList3" :service-id="ruleFrom.id" service-type="ORDER" />
    </div>
    <div v-show="activeName === '4'">
      <BoxListComponent
        ref="detailTabList4"
        :url="'/omspurchasebox/omsPurchaseBoxList'"
        class="whiteBox"
        :methodType="'post'"
        :return-data="returnData"
        :params="{
          serviceId: $route.query.id,
          serviceType: 'BOX'
        }"
      >
        <template v-slot:btn="scope">
          <div style="margin-bottom: 5px">
            <span>状态：{{ scope.row.status | statusFilter }}</span>
            <template v-if="ruleFrom.dispatchType === 'LOGISTICS'">
              <span style="margin: 0 10px">面单号：{{ scope.row.surfaceOrder || '暂无' }}</span>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="addLogisticsManifest(scope.row)">填写面单</el-button>
            </template>
            <span v-if="scope.row.remark" style="margin-left: 10px">备注：{{ scope.row.remark }}</span>
          </div>
        </template>
      </BoxListComponent>
    </div>
  </div>
</template>
<script>
import Tab from '@/components/Tab/detailTab.vue'
// import TableComponent from '@/components/Table/list.vue'
import BoxListComponent from "@/views/components/wms/BoxList/index.vue";
import DeliveryNote from './deliveryNote'
import ProductList from './productList'
import CommonFile from '@/components/File/index.vue'
// import { DispatchStatusEnum } from '@/views/oms/const/enum/index.js'
// import { updateOmsPurchaseBox } from '@/views/oms/api/index.js'
export default { 
  components: { Tab, BoxListComponent, DeliveryNote, ProductList, CommonFile },  
  props: {
    ruleFrom: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  filters: {
    statusFilter(newVal) {
      return (DispatchStatusEnum.find(c => c.value === newVal) || {}).label || '--'
    }
  },
  data() {
    return {
      activeName: '1',
      tabColumns: [
        {
          name: this.$t('order.productList'),
          value: '1'
        },
        {
          name: this.$t('order.OutboundOrder'),
          value: '2'
        },
        {
          name: this.$t('common.files'),
          value: '3'
        }
      ],
      columns: [
        { prop: 'itemId', label: this.$t('order.itemId') },
        { prop: 'productName', label: this.$t('order.productName') },
        { prop: 'productQuantity', label: this.$t('common.count') },
        { prop: 'productPrice', label: this.$t('common.price') },
        { prop: 'productTotalPrice', label: this.$t('fiance.amount') }
      ],
      renderTable: true // 表格增加一个key 数据变更页面渲染表格用
    }
  },
  methods: {
    handleTabClick(v) {
      this.activeName = v
      // if (this.activeName === '1') {
      //   this.$emit('refresh')
      // } else {
        const name = 'detailTabList' + this.activeName
        this.$refs[name].getList()
      // }
    },
    returnData(data) {
      if (data.list) {
        return data.list
      }
    },
    getList() {
      this.$refs.detailTabList1.getList()
    },
    addLogisticsManifest(row) {
      const { id } = row
      this.$prompt('请输入面单', this.$t('common.reminder'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        inputPattern: /^[A-Za-z0-9]+$/,
        inputErrorMessage: '面单格式不正确'
      })
        .then(({ value }) => {
          updateOmsPurchaseBox({ surfaceOrder: value, id }).then(r => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.handleTabClick(this.activeName)
          })
        })
        .catch(() => {})
    }
  }
}
</script>
